<template>
	<view class="swich_box" @click="switchChange">

		<view :class="['on_off',{switch_open:swichValue}]">
			<view :class="['open_icon',{icon_open:swichValue}]"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			value:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				swichValue:this.value
			};
			
		},
		methods:{
			switchChange(){
				this.swichValue=!this.swichValue
				this.$emit('switchChange', this.swichValue);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swich_box {
		.switch_open {
			background: #C3A769 !important;
		}

		.icon_open {
			
			left: 37rpx !important;
		}

		.on_off {
			position: relative;
			// display: flex;
			// align-items: center;
			width: 74rpx;
			height: 38rpx;
			// padding: 4rpx;
			border-radius: 19.5rpx;
			background: #000000;
			transition: all .3s;
			// border: 1rpx solid #383838;
			
			.open_icon {
				position: absolute;
				left: 6rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 30rpx;
				height: 30rpx;
				transition: all .3s;
				border-radius: 50%;
				background: #FFF;
			}
		}
	}
</style>